<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo" :x="sum">
			<h1>当前sum的值为：{{sum}}</h1>
			<button id="btn" @click="add">点我sum+1</button>
			<button @click="death">销毁我自己</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				/* template:`
					<div :x="sum">
						<h1>当前sum的值为：{{sum}}</h1>
						<button id="btn" @click="add">点我sum+1</button>
					</div>
				`, */
				data:{
					sum:1
				},
				methods:{
					add(){
						console.log('add方法执行了')
						this.sum += 1
					},
					death(){
						this.$destroy() //触发vm的“自我毁灭”流程
					}
				},
				watch:{
					sum(){
						console.log('sum变了')
					}
				},
				//数据代理、数据劫持 创建之前
				beforeCreate(){
					console.log('--beforeCreate--')
					// console.log(this)
					// debugger;
					this.x = 999
				},
				//数据代理、数据劫持 创建完毕
				created(){
					console.log('--created--')
					// console.log(this)
					// debugger;
				},
				//挂载前
				beforeMount(){
					console.log('--beforeMount--')
					// console.log(this)
					// document.getElementById('btn').innerText = '哈哈'
					// debugger;
				},
				//挂载完毕
				mounted(){
					console.log('--mounted--')
					// console.log(this.$el)
					// debugger;
				},
				//更新之前
				beforeUpdate(){
					console.log('--beforeUpdate--')
					// console.log(this)
					// debugger;
				},
				//更新完毕
				updated(){
					console.log('--updated--')
					// console.log(this)
					// debugger;
				},
				//销毁之前
				beforeDestroy(){
					console.log('--beforeDestroy--')
					console.log(1,this)
					// vm.add() //注意点：此处不会触发更新流程，因为已经走在“死亡的”路上了。
				},
				//销毁完毕
				destroyed(){
					console.log('--destroyed--')
					console.log(2,this)
				}
			})
			console.log(vm)
		</script>
	</body>
</html>